<template>
    <div align="center">
        <h2>显示门店信息</h2>
    <span>门店名称</span>
    <input type="text" v-model="state.mendianname">
    <input type="button" value="查询" @click="getList">
    <table border="1">
        <thead>
            <tr>
    <td>门店名称</td>
    <td>门店图片</td>
    <td>门店电话</td>
    <td>门店地址</td>
    <td>备注信息</td>
    <td>操作</td>
</tr>
        </thead>
        <tbody>
    <tr v-for="item in list">
    <td>{{item.storeName}}</td>
    <td><img :src="'https://localhost:7125'+item.storeImg" alt=""  width="60" height="60"/></td>
    <td>{{item.storePhone}}</td>
    <td>{{item.storeAddress}}</td>
    <td>{{item.storeInter}}</td>
    <td>
        <input type="button" value="删除" @click="del(item.id)">
        <input type="button" value="修改" @click="upt(item.id)">
    </td>
</tr>
        </tbody>
    </table>
    当前第{{state.pageindex }}页
    每页显示{{state.pagesize}}条
    总条数{{totalcount}}
    总页数{{totalpage}}
        <input type="button" value="首页" @click="gopage('a')">
        <input type="button" value="上一页" @click="gopage('b')">
        <input type="button" value="下一页" @click="gopage('c')">
        <input type="button" value="尾页" @click="gopage('d')">
        <input type="text" v-model="page">
        <input type="button" value="Go" @click="gopage(page)">
        <select v-model="state.pagesize" @change="change">
            <option value="2">==2==</option>
            <option value="4">==4==</option>
            <option value="6">==6==</option>
        </select>
        <p>{{ userStore.userinfo }}</p>
    </div>
    
        
</template>

<script setup lang="ts">
import axios from 'axios';
//reactive实现数据响应式
//toRefs作用将reactive转换为ref
//onMounted类似文档就绪函数，是vue的生命周期钩子函数
import { onMounted,reactive,toRefs } from 'vue';
//userouter作用创建一个路由器，实现页面跳转并传参
//useroute作用创建一个路由对象，可接收路由传递过来的参数
import {useRouter} from 'vue-router';
import {useUserStore} from '../store/user';

const userStore=useUserStore();


const router=useRouter();

const storelist:any=reactive({
    state:{
        mendianname:'',
        pageindex:1,
        pagesize:2
    },
    list:[],
    totalpage:0,
    totalcount:0,
    page:1,
    arr:[2,4,6]
 })

const {state,list,totalpage,totalcount,page,arr}=toRefs(storelist);

//页容量下拉框改变
const change=()=>{
    state.value.pageindex=1;
    page.value=1;
    getList();
}
//分页
const gopage=(str:any)=>{
    switch(str)
    {
        case 'a':
            state.value.pageindex=1;
            console.log('开始翻页');
            break;
        case 'b':
            if(state.value.pageindex<totalpage.value)
            {
                alert('已经开始下一页');
                return;
            }
            state.value.pageindex--;
            console.log('开始翻页');
            break;
        case 'c':
        if(state.value.pageindex==totalpage.value)
            {
                alert('已经开始下一页');
                return;
            }
            state.value.pageindex++;
            console.log('下一页');
            break;
        case 'd':
            if(state.value.pageindex==totalpage.value)
            {
                alert('最后一页');
                return;
            }
            state.value.pageindex==totalpage.value;
            console.log('最后一页');
            break;
            case str:
                if(str=="")
                {
                    alert('页码不能为空');
                    return;
                }
                if(isNaN(str)==true)
                {
                    alert('只能为数字');
                    return;
                }
                if(str>totalpage.value||str<1)
                {
                    alert('只能是1到'+totalpage.value+'之间的数字');
                    return;
                }
                state.value.pageindex=str;
            break;
    }
    getList();
}

//就绪函数
onMounted(()=>{
    getList();
})

//单次删除
const del=(id:any)=>{
    var f=confirm('确认要删除吗？');
    if(f==true)
    {
        axios({
        url:'/api/Store/DelStore',
        method:'delete',
        params:{id:id}
    })
    .then(res=>{
        console.log(res);
        if(res.data.data>0)
        {
            alert('删除成功');
            getList();
        }
        else{
            alert('删除失败');
            return;
        }
    })
    .catch(err=>{
        console.log(err);
    });
    }
}




const getList=()=>{
    axios({
        url:'/api/Store/ShoeStores',
        method:'get',
        params:state.value
    })
    .then(res=>{
        console.log(res);
        list.value=res.data.data;
        totalpage.value=res.data.totalpage;
        totalcount.value=res.data.totalcount;
    })
    .catch(err=>{
        console.log(err);
    });
}

//修改跳转反填
//query属性传值
const upt=(id:any)=>{
    router.push({
        path:'/UptStore',
        query:{id:id}
    })
}
</script>

<style scoped>
</style>